import React, { Component } from "react";
import { hot } from "react-hot-loader/root";
import { Router, Route, Switch } from "react-router-dom";
import Loadable from "react-loadable";
import { history } from "./lib";
import ProtectedRoute from "./containers/protect";
import Layout from "./components/layout";
import Loading from "./components/loading";

const Login = Loadable({
  loader: () => import("./containers/login"),
  loading: Loading,
});
const SiderMenu = Loadable({
  loader: () => import("./containers/siderMenu"),
  loading: Loading,
});
const Task = Loadable({
  loader: () => import("./containers/task"),
  loading: Loading,
});
class App extends Component {
  render() {
    return (
      <Router history={history}>
        <Switch>
          <Route path="/login" component={Login} />
          <ProtectedRoute component={Main} />
        </Switch>
      </Router>
    );
  }
}

const Main = () => (
  <Layout>
    <SiderMenu />
    <Route path="/" exact component={Task} />
  </Layout>
);

export default (process.env.NODE_ENV === "development" ? hot(App) : App);
